<!-- dall3 -->
<template>
  <div class="hot-words">
    <div>
      <el-text tag="b">模型版本</el-text>
    </div>
    <el-space wrap class="word-list">
      <el-button
        round
        class="btn"
        :type="selectModelVersion === modelVersion.key ? 'primary' : 'default'"
        v-for="modelVersion in modelVersionList"
        :key="modelVersion.key"
        @click="handleModelVersionClick(modelVersion.key)"
      >
        {{ modelVersion.name }}
      </el-button>
    </el-space>
  </div>

  <div class="model_url">
    <div class="mb-15px mt-15px">
      <el-text tag="b">转3d图片</el-text>
      <el-text tag="p"/>
    </div>
    <div>
      <UploadImg
        v-model="imageUrl"
        :fileType="['image/png','image/jpg','image/jpeg']"
        :fileSize="20"
        class="min-w-80px"
      />
    </div>
  </div>

  <div v-if="selectModelVersion ==='v2.0-20240919'">

    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">模型随机种子</el-text>
      </div>
      <el-input type="number" :maxlength="7" v-model="modelSeed"/>
    </div>

    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">限制输出模型上的面数</el-text>
      </div>
      <el-input type="number" :maxlength="7" v-model="faceLimit "/>
    </div>

    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">是否启用纹理</el-text>
      </div>
      <!--是/否-->
      <el-switch v-model="enableTexture"/>
    </div>

    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">是否启用PBR材质贴图</el-text>
      </div>
      <!--是/否-->
      <el-switch v-model="enablePbr"/>
    </div>

    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">纹理随机种子</el-text>
      </div>
      <el-input type="number" :maxlength="7" v-model="textureSeed"/>
    </div>

    <div class="hot-words">
      <div>
        <el-text tag="b">纹理对齐的优先级</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button
          round
          class="btn"
          :type="selectTextureAlignment === textureAlignment.key ? 'primary' : 'default'"
          v-for="textureAlignment in textureAlignmentList"
          :key="textureAlignment.key"
          @click="handleTextureAligentClick(textureAlignment.key)"
        >
          {{ textureAlignment.name }}
        </el-button>
      </el-space>
    </div>

    <div class="hot-words">
      <div>
        <el-text tag="b">纹理质量</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button
          round
          class="btn"
          :type="selectTextureQuality === textureQuality.key ? 'primary' : 'default'"
          v-for="textureQuality in textureQualityList"
          :key="textureQuality.key"
          @click="handleTextureQualityClick(textureQuality.key)"
        >
          {{ textureQuality.name }}
        </el-button>
      </el-space>
    </div>


    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">是否缩放到实际尺寸</el-text>
      </div>
      <!--是/否-->
      <el-switch v-model="autoSize "/>
    </div>

    <div class="hot-words">
      <div>
        <el-text tag="b">艺术风格（再点取消选中）</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button style="position: relative;"
          round
          class="btn"
          :type="selectStyle === style.key ? 'primary' : 'default'"
          v-for="style in styleList"
          :key="style.key"
          @click="handleStyleClick(style.key)"
        >
          <el-image v-if="style.icon" fit="contain" class="h-27px w-27px border-rounded-4px"
                    :src="style.icon"/>
          {{ style.name }}
        </el-button>
      </el-space>
    </div>

    <div class="hot-words">
      <div>
        <el-text tag="b">对齐原始图像</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button
          round
          class="btn"
          :type="selectOrientation === orientation.key ? 'primary' : 'default'"
          v-for="orientation in orientationList"
          :key="orientation.key"
          @click="handleOrientationClick(orientation.key)"
        >
          {{ orientation.name }}
        </el-button>
      </el-space>
    </div>

  </div>


  <div class="btns">
    <el-button type="primary" size="large" round :loading="createIn" @click="handleCreateThreed">
      {{ createIn ? '生成中' : '生成内容' }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
import {ThreedVO, ThreedApi, ImageTo3dReqVO} from '@/api/ai/threed'
import {
  AiPlatformEnum, AiCreateThreeDEnum,
  textureAlignmentList, textureQualityList, modelVersionList, styleList, orientationList
} from '@/views/ai/utils/constants'

const message = useMessage() // 消息弹窗

// 定义属性
const imageUrl = ref<string>('')
const selectModelVersion = ref<string>('v2.0-20240919') // 表面模式
const modelSeed = ref<number>(0)
const textureSeed = ref<number>(0)
const faceLimit = ref<number>()
const autoSize = ref<boolean>(false)
const enablePbr = ref<boolean>(true) // 是否启用PBR材质贴图
const enableTexture = ref<boolean>(true)
const selectTextureAlignment = ref<string>()
const selectTextureQuality = ref<string>()
const selectStyle = ref<string>()
const selectOrientation = ref<string>()
const createIn = ref<boolean>(false) // 生成中

const emits = defineEmits(['onCreateStart', 'onCreateComplete']) // 定义 emits

/** 模型版本 */
const handleModelVersionClick = async (key: string) => {
  selectModelVersion.value = key
}

/** 纹理保真度 */
const handleTextureAligentClick = async (key: string) => {
  selectTextureAlignment.value = key
}

/** 纹理质量 */
const handleTextureQualityClick = async (key: string) => {
  selectTextureQuality.value = key
}

/** 艺术风格 */
const handleStyleClick = async (key: string) => {
  if(key === selectStyle.value){
    selectStyle.value = undefined
  }else{
    selectStyle.value = key
  }
}

const handleOrientationClick = async (key: string) => {
  selectOrientation.value = key
}
/** 填充值 */
const settingValues = async (threedVO: ThreedVO) => {
  imageUrl.value = threedVO.imageUrl;
  enablePbr.value = threedVO.enablePbr;

  modelSeed.value = threedVO.modelSeed;
  textureSeed.value = threedVO.textureSeed;
  faceLimit.value = threedVO.faceLimit;
  autoSize.value = threedVO.autoSize;
  enableTexture.value = threedVO.enableTexture;

  selectModelVersion.value = threedVO.modelVersion;
  selectTextureAlignment.value = threedVO.textureAlignment;
  selectTextureQuality.value = threedVO.textureQuality;
  selectStyle.value = threedVO.style;
  selectOrientation.value = threedVO.orientation;
}

const handleCreateThreed = async () => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中
    createIn.value = true
    // 回调
    emits('onCreateStart', AiPlatformEnum.TRIPO)
    const form = {
      platform: AiPlatformEnum.TRIPO, // 平台
      model: AiPlatformEnum.TRIPO, // 模型
      funcType: AiCreateThreeDEnum.IMAGE_3D,
      imageUrl: imageUrl.value,
      modelVersion: selectModelVersion.value, // 模型版本
      textureAlignment: selectTextureAlignment.value, // 纹理保真度
      textureQuality: selectTextureQuality.value, // 纹理质量
      style: selectStyle.value, // 艺术样式
      orientation: selectOrientation.value, // 是否对齐原始图像
      enablePbr: enablePbr.value, // 是否启动pbr
      enableTexture: enableTexture.value,
      modelSeed: modelSeed.value,
      textureSeed: textureSeed.value,
      faceLimit: faceLimit.value,
      autoSize: autoSize.value,
    } as ImageTo3dReqVO
    // 发送请求
    await ThreedApi.generateImageTo3d(form)
  } finally {
    // 回调
    emits('onCreateComplete', AiPlatformEnum.TRIPO)
    // 加载结束
    createIn.value = false
  }
}

/** 暴露组件方法 */
defineExpose({ settingValues })
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}

// 热词
.hot-words {
  display: flex;
  flex-direction: column;
  margin-top: 15px;

  .word-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 15px;

    .btn {
      margin: 0;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
